
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>订单详情</title>
    {include file="public/head" /}

<body class="bc-back">
<div class="mfc cbox headtop fl">
    <div class="sreach mfc ">
        <p class="tc fs12"><strong>购物车</strong></p>
        <div class="pabs-r-box c-red ACT" act_v="this:anoAct|#settle:anoAct">
            <span class="fa fa-trash fa-2x tc c-red acshow" style="width:1.6em;"></span>
            <span class="tc c-red noshow" style="width:3.6em;">完成</span>
        </div>
    </div>
</div>
<div class="mfc cart fl">
    <div class="mfc cbox fl">
<!--        <div class="cart-goods-alist sr"></div>&lt;!&ndash; cart-goods-alist 标签内无任何内容时，购物车空空如也 &ndash;&gt;-->
        <div class="cart-goods-alist sr">
            {notempty name="data"}
            {volist name="data" id="vo"}
            {volist name="vo.list" id="vo2"}
            <div class="mfc">
                <input type="checkbox" name="cart" value="{$vo2.id}" price="{$vo2.price}" attr_values="{$vo2.attr_values}" number="{$vo2.number}" {if $vo2.checkbox == 1}checked{/if}>
                <div class="cell">
                    <div class="icon"><div class="sicon"><img src="{$vo2.single_pic}"></div></div>
                    <div class="info">
                        <p>{$vo2.title}</p>
                        <p class="tags"><span class="">{$vo2.attr_values}</span></p>
                        <p class="price">
								<span class="">
<!--									<span class="imark c-red">已降价30元</span><br>-->
									<span class="c-red"><span class="fa fa-cny"></span> <span class="fs12">	{$vo2.price}</span></span><span class="fa fa-cny cost"> {$vo2.line_price}</span>
								</span>
                                <span class="option fr">
									<button class="fa fa-minus totol_num"></button>
									<span class="number">{$vo2.number}</span>
									<button class="fa fa-plus totol_num"></button>
								</span>
                        </p>
                    </div>
                </div>
            </div>
            {/volist}
            {/volist}
            {/notempty}

        </div>
    </div>
</div>

<div class="mfc bmenu bsettle fl">
    <div class="settle botton tsilk" id="settle">
        <div class="mfc fs12 info">
            <input type="checkbox" name="selectAll"> <span class="imark">全选</span>
            <span class="fr acshow">
					<span>合计:</span>
					<span class="fs06 fa fa-cny c-red"></span>
					<span class="c-red total_price">{$total_price}</span>
				</span>
        </div>
        <div class="btnbox pabs-r-box bc-red c-white acshow">去结算（<span class="totle">{$total_num}</span>）</div>
        <div class="btnbox pabs-r-box bc-red c-white noshow">删除</div>
    </div>
</div>

{include file="public/foot" /}
<script>
    //去结算
    $('.acshow').click(function () {
        var id_str = [];
        $('[name=cart]').each(function () {
            var checked = $(this).is(':checked');
            if (checked) {
                var id = $(this).val();
                id_str.push(id);
            }
        })
        var str = id_str.join(',');
        console.log(str);
        if(!str){
            layer.msg('没有选中的商品');return false;
        }
        window.location.href = "{:url('Cart/order_list')}?cart_id_str="+str;
    });
    $('.totol_num').click(function () {
        var totol_num = 0;
        $('[name=cart]').each(function () {
            var checked = $(this).is(':checked');
            if (checked) {

                var number = $(this).attr('number');
                totol_num += parseInt(number);
            }
        })

        $('.totle').text(totol_num);
    });

    $('.noshow').click(function () { //点击删除按钮
        var id_str = [];
        $('[name=cart]').each(function () {
            var checked = $(this).is(':checked');
            if (checked) {
                var id = $(this).val();
                id_str.push(id);
            }
        })

        var str = id_str.join(',');
        console.log(str);
        $.ajax({
            type: "POST", //用POST方式传输
            dataType: "json", //数据格式:JSON
            url: "{:url('destory')}", //目标地址
            data:{id:str},
            async: false,
            traditional :false,
            // data:{distribution_type:distribution_type,order_number:order_number},
            success: function (ret) {

            }
        });
    });
    $('.fa-plus').click(function () {
        var id = $(this).parent().parent().parent().parent().parent().find('input').val();

        var v = parseInt($(this).prev().text());
        var num = v + parseInt(1);
        //var attr_values = $(this).parents('.mfc').find('input').attr('attr_values');
        var attr_values = $(this).parent().parent().parent().parent().parent().find('input').attr('attr_values');
        $(this).prev().text(num);
        check_all();
        $.ajax({
            type: "POST", //用POST方式传输
            dataType: "json", //数据格式:JSON
            url: "{:url('update_attr_number')}", //目标地址
            data:{id:id,attr_values:attr_values,number:num},
            async: false,
            traditional :false,
            // data:{distribution_type:distribution_type,order_number:order_number},
            success: function (ret) {
                if(ret.code !=200){
                    layer.msg(ret.message);
                }
            }
        });
    });
    $('.fa-minus').click(function () {

        var id = $(this).parent().parent().parent().parent().parent().find('input').val();
        var attr_values = $(this).parent().parent().parent().parent().parent().find('input').attr('attr_values');
        var v = parseInt($(this).next().text());
        var num = v-parseInt(1);
        check_all();
        if(num >0){
            $(this).next().text(num)
        }
        $.ajax({
            type: "POST", //用POST方式传输
            dataType: "json", //数据格式:JSON
            url: "{:url('update_attr_number')}", //目标地址
            data:{id:id,attr_values:attr_values,number:num},
            async: false,
            traditional :false,
            // data:{distribution_type:distribution_type,order_number:order_number},
            success: function (ret) {
                if(ret.code !=200){
                    layer.msg(ret.message);
                }
            }
        });

    });
    $('[name="selectAll"]').click(function () { //点击全部按钮 全部选中或者不选中
      var checked=  $(this).is(':checked');//通用版本


      if(checked == true){
          $('[name=cart]').prop('checked',true);
      }else{
          $('[name=cart]').prop('checked',false);
      }
        check_all();//必须在 if判断后面
    });

    function check_all() { //根据选择的判断全部全中按钮
        setTimeout(function () {
            var selectal = true; //默认选中全部 如果有一个不是选中就取消
            var total_price = 0;
            var total_num = 0;
            $('[name=cart]').each(function(){
                var checked = $(this).is(':checked');
                if (!checked){
                    selectal = false;
                }
                if (checked){ //选中的来判断相加的价格和id
                    var price = $(this).attr('price');
                    var number = $(this).next().find('.number').text();
                    console.log(number);
                    total_price += parseFloat(price) * parseInt(number);
                    total_num += parseInt(number);
                }
            })
            $('.total_price').text(total_price);
            $('.totle').text(total_num);
            if (selectal == true) {
                $('[name=selectAll]').prop('checked', true);
            } else {
                $('[name=selectAll]').prop('checked', false);
            }
        },100);

    }
    check_all();
    $('[name=cart]').click(function () {
        check_all();
        var id = $(this).val();
        $.ajax({
            type: "POST", //用POST方式传输
            dataType: "json", //数据格式:JSON
            url: "{:url('checkbox_tab')}", //目标地址
            data:{id:id},
            async: false,
            traditional :false,
            // data:{distribution_type:distribution_type,order_number:order_number},
            success: function (ret) {

            }
        });
    });
</script>
</body>
</html>